@import "./element-ui.scss";
* {
	padding: 0;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
		"微软雅黑", Arial, sans-serif;
}

#app {
	height: 100vh;
	width: 100vw;
	min-width: 1300px;
	overflow: hidden;
}
a {
	text-decoration: none;
}
.disabled {
	pointer-events: none;
}
input,
button {
	outline: none;
}

input {
	&:-webkit-autofill {
		box-shadow: 0 0 0px 1000px white inset;
	}
}
.clearfix {
	&:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}

// 重置样式
.cl-filter-group {
	margin-left: 0 !important;
	display: flex;
	// flex-wrap: wrap;
	.cl-filter-group__items {
		flex: 1;
		flex-wrap: wrap ;
		align-items: flex-start;
	}
	// .cl-filter-group__op {
	// 	// display: flex;
	// }
	.cl-filter {
		margin-bottom: 10px;
		&:first-child {
			margin-left: 0 !important;
		}
	}
}

.color-primary {
	color: $color-primary;
}
.color-success {
	color: $color-success;
}
.color-danger {
	color: $color-danger;
}
.color-info {
	color: $color-info;
}
.color-warning {
	color: $color-warning;
}
.grayscale {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.flex {
	@include flex;
	&-column {
		@include flex;
		flex-direction: column;
	}
	&-wrap {
		flex-wrap: wrap;
	}
	&-1 {
		flex: 1;
	}
	&-justify-start {
		justify-content: flex-start;
	}
	&-justify-center {
		justify-content: center;
	}
	&-justify-end {
		justify-content: flex-end;
	}
	&-justify-between {
		justify-content: space-between;
	}
	&-align-start {
		align-items: flex-start;
	}
	&-align-center {
		align-items: center;
	}
	&-align-end {
		align-items: flex-end;
	}
}

.s-tips {
	color: #c0c4cc;
}
.tips {
	color: #999;
	font-size: 12px;
}
//上下等分
.s-flex-direction {
	display: flex;
	flex-direction: column;
	.s-flex-item {
		flex: 1;
	}
}
.s-scroll {
	overflow-y: auto;
	overflow-x: hidden;
}
.h-100 {
	height: 100%;
}
.w-100 {
	width: 100%;
}
//图片
.s-image {
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		color: #909399;
	}
}
.tag {
	display: inline-block;
	line-height: 12px;
	border-radius: 16px;
	padding: 4px 10px;
	color: #fff;
	background: $color-primary;
	border: solid 1px $color-primary;
	font-size: 12px;
	&.danger {
		background: $color-danger;
		border-color: $color-danger;
	}
	&.warning {
		background: $color-warning;
		border-color: $color-warning;
	}
	&.success {
		background: $color-success;
		border-color: $color-success;
	}
	&.info {
		background: $color-info;
		border-color: $color-info;
	}
	&.plain {
		background: mix(#fff, $primary, 90%);
		color: $color-primary;
	}
	&.plain {
		&.white {
			background: transparent;
			color: #fff;
			border-color: #fff;
		}
		&.danger {
			background: mix(#fff, $color-danger, 90%);
			color: $color-danger;
		}
		&.warning {
			background: mix(#fff, $color-warning, 90%);
			color: $color-warning;
		}
		&.success {
			background: mix(#fff, $color-success, 90%);
			color: $color-success;
		}
		&.info {
			background: mix(#fff, $color-info, 90%);
			color: $color-info;
		}
	}
}

// .el-cascader {
// 	&--mini {
// 		.el-input--mini .el-input__inner {
// 			height: 28px;
// 		}
// 	}
// }
// color - start
.color-red {
	color: red;
}
.color-sub-text {
	color: $color-sub-text;
}
.color-gray {
	color: $color-gray;
}
.color-placeholder {
	color: $color-placeholder;
}
.color-disable {
	color: $color-disable;
}

.cl-crud > .el-row {
	&::-webkit-scrollbar {
		height: 6px !important;
	}
}

/* 滚动条 */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	&-button {
		display: none;
	}
	&-track {
		background-color: black;
		&-piece {
			background-color: #f5f5f5;
		}
	}
	&-thumb {
		border-radius: 4px;
		background-color: #d0d0d0;
		margin-right: 8px;
		&:hover {
			background-color: #aaa;
		}
	}
	&-corner {
		background-color: #f5f5f5;
	}
	&-resizer {
		background-color: #ff6e00;
	}
}

// color -end
//最多显示n行
@for $i from 1 through 5 {
	@if $i==1 {
		.ellipsis {
			@include ellipsis;
		}
	} @else {
		.ellipsis#{$i} {
			@include ellipsis($i);
		}
	}
}
// font
@for $i from 0 through 40 {
	.font-#{$i} {
		font-size: 1px * $i;
	}
}
// padding / margin
@for $i from 0 through 6 {
	.ma-#{$i} {
		margin: 10px * $i;
	}
	.mlr-#{$i} {
		margin-left: 10px * $i;
		margin-right: 10px * $i;
	}
	.mtb-#{$i} {
		margin-top: 10px * $i;
		margin-bottom: 10px * $i;
	}
	.ml-#{$i} {
		margin-left: 10px * $i;
	}
	.mr-#{$i} {
		margin-right: 10px * $i;
	}
	.mt-#{$i} {
		margin-top: 10px * $i;
	}
	.mb-#{$i} {
		margin-bottom: 10px * $i;
	}
	.pa-#{$i} {
		padding: 10px * $i;
	}
	.plr-#{$i} {
		padding-left: 10px * $i;
		padding-right: 10px * $i;
	}
	.ptb-#{$i} {
		padding-top: 10px * $i;
		padding-bottom: 10px * $i;
	}
	.pl-#{$i} {
		padding-left: 10px * $i;
	}
	.pr-#{$i} {
		padding-right: 10px * $i;
	}
	.pt-#{$i} {
		padding-top: 10px * $i;
	}
	.pb-#{$i} {
		padding-bottom: 10px * $i;
	}
}
.ml-0 {
	margin-left: 0 !important;
}

// 手机端的时候 弹窗内容高度默认 100%
.app-mobile {
	.el-dialog__body {
		max-height: 100vh !important;
	}
}

// 金额
.price-com {
	display: inline-flex;
	align-items: flex-end;
	font-size: 18px;
	line-height: 1;
	&::before {
		font-family: inherit;
		position: relative;
		bottom: 2px;
		// font-weight: bold;
		content: "￥";
		font-size: 65%;
		color: inherit;
	}
}
@supports (top: env(safe-area-inset-top)) {
	:root {
		--safe-area-inset-top: env(safe-area-inset-top);
		--safe-area-inset-right: env(safe-area-inset-right);
		--safe-area-inset-bottom: env(safe-area-inset-bottom);
		--safe-area-inset-left: env(safe-area-inset-left);
	}
}

// 重粉弹窗样式修改
.have-fan-confirm {
	// .el-message-box__message {
	// 	color: red;
	// }
	.el-message-box__status.el-icon-warning {
		color: red;
	}
}

// 号码包重复弹窗样式修改
.wechat-number-confirm {
	.el-message-box__status {
		top: 0 !important;
		transform: none !important;
	}
	.el-message-box__status.el-icon-warning {
		color: red;
	}
}
